<template>
  <div class="money_wrapper">
    <div class="excel_btn_wrapper">
      <el-button type="success" class="" @click="exportExcel">导出为Excel</el-button>
    </div>

    <div class="table_wrapper">
      <el-table
        :data="tableData"
        style="">
        <!-- <el-table-column
          :label="item"
          width="120" align="center" v-for="(item, index) in ['缴费单号','时间','备注', '金额','类型','用户']" :key="index">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="">{{ scope.row.date }}</span>
          </template>
        </el-table-column> -->
        <el-table-column
          label="缴费单号"
          align="left" >
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="">JF-{{ scope.row.sno.substring(0,6) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="时间"
          align="left" >
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="">{{ scope.row.time }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="备注"
          align="left" >
          <template slot-scope="">
            <i class="el-icon-time"></i>
            <span style="">暂无</span>
          </template>
        </el-table-column>
        <el-table-column
          label="金额"
          align="left" >
          <template slot-scope="scope">
            <!-- <i class="el-icon-time"></i> -->
            <span style="">￥{{scope.row.price}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="类型"
          align="left" >
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="">{{ scope.row.itemname }}</span>
          </template>
        </el-table-column>
        
        
        <el-table-column
          align="left"
          label="用户"
          >
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
              <p>真名: {{ scope.row.petOwn.realname }}</p>
              <p>昵称: {{ scope.row.petOwn.nickname }}</p>
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{ scope.row.petOwn.realname }}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <!-- <el-table-column label="操作" align="left">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column> -->
      </el-table>
    </div>
    
  </div>
</template>

<script>
import {myGet, myPost, myPostBody, myDown} from '../utils/api'
  export default {
    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }, {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }]
      }
    },
    mounted(){
      myGet('/pay/all', null).then(res => {
        console.debug(res)
        this.tableData = res.data.res
      }).catch(err => {
        console.debug(err)
      })
    },
    methods: {
      handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
      }, 
      exportExcel(){
        myDown('/pay/excel', null).then(res => {
          // console.debug('pay/excel res', res)
        }).catch(err => {
          console.debug('pay/excel err', err)
        })
        
      }
    }
  }
</script>


<style scoped>
.table_wrapper{
  box-shadow: 0 0 5px rgb(184, 181, 181);
}
.excel_btn_wrapper{
  /* box-shadow: 0 0 5px black; */
  text-align: right;
  padding: 5px;
  margin-right: 10px;
}
</style>